<template>
    <div class="app-container documentation-container">
        <el-table :data="data" style="width: 100%">
            <el-table-column prop="name" label="职位">
            </el-table-column>
            <el-table-column prop="number">
                <template slot="header" slot-scope="scope">
                    操作
                    <el-button type="text" @click="add()">添加</el-button>
                </template>
                <template slot-scope="scope">

                    <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="text" style="color:#F56C6C" @click="del(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="寝室修改" :visible.sync="positionDialogVisible" 
        :close-on-click-modal="false" width="30%">
            <div>
                <el-form ref="form" :model="dataForm" label-width="80px">
                    <el-form-item label="职位">
                        <el-input v-model="dataForm.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="positionDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="post">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
        
    <script>
import { getPosition } from "@/api/basic";
import { addPosition, editPosition, delPosition } from "@/api/position";
import User from "@/components/Check/User";
import Dorm from "@/components/Check/Dorm";
export default {
  name: "Documentation",
  components: { Dorm },
  data() {
    return {
      data: [],
      positionDialogVisible: false,
      dataForm: {},
      type: "create"
    };
  },
  created() {},
  mounted() {
    this.getPositions();
  },
  methods: {
    async getPositions() {
      const res = await getPosition();
      this.data = res.data;
    },
    edit(data) {
      this.dataForm = data;
      this.positionDialogVisible = true;
      this.type = "edit";
    },
    add() {
      this.dataForm = {};
      this.positionDialogVisible = true;
      this.type = "create";
    },
    post() {
      if (this.type == "create") {
        addPosition(this.dataForm).then(res => {
          this.getPositions();
          this.positionDialogVisible = false;
          this.$message({
            message: "保存成功",
            type: "success"
          });
        });
      } else {
        editPosition(this.dataForm).then(res => {
          this.getPositions();
          this.positionDialogVisible = false;
          this.$message({
            message: "保存成功",
            type: "success"
          });
        });
      }
    },
    del(data) {
      this.$confirm("此操作将删除该职位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delPosition({
          id: data.id
        }).then(res => {
          if (res.code == 201) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getPositions();
          }
        });
      });
    }
  }
};
</script>
        
    <style lang="scss" scoped>
</style>